<template>
  <q-input outlined @click="show" :model-value="currentMapPose.name" :label="label">
    <q-dialog v-model="visible">
      <q-card style="max-height: calc(100vh - 2rem); max-width: 90vw">
        <q-card-section class="row items-center q-gutter-x-sm no-wrap overflow-auto" style="min-width: 20rem;">
          <template v-if="$q.screen.gt.xs">
            <div class="text-h6 text-bold text-center text-grey-7">选择导航点</div>
            <q-space/>
          </template>
          <q-select outlined dense style="min-width: 8rem" clearable
            v-model="group" :options="groups" behavior="menu"
            label="选择地图组"/>
          <q-select v-model="map" :options="options" label="选择地图"
                    @filter="filterFn" :use-input="!map" clearable
                    behavior="menu" outlined dense style="min-width: 8rem"
                    option-label="name"/>
        </q-card-section>
        <q-separator/>
        <q-slide-transition>
          <div v-if="mapPoses.length !== 0">
            <q-card-section
              style="max-height: calc(100vh - 10rem); min-height: 10rem; min-width: 15rem; overflow: auto"
              class="row items-center justify-center">
              <q-card v-for="mapPose in mapPoses" v-bind:key="mapPose.id"
                      class="q-ma-sm"
                      @click="select(mapPose)"
                      style="min-width: 15rem">
                <q-card-section class="row items-center">
                  <div class="text-h6 text-bold text-black no-wrap overflow-hidden"
                       style="width: calc(100% - 4rem); height: 2rem">{{ mapPose.name }}</div>
                </q-card-section>
                <q-separator />
                <q-list>
                  <q-item dense v-for="item in mapPoseItems" v-bind:key="item.key" clickable v-ripple>
                    <q-item-section>{{ item.title }}</q-item-section>
                    <q-item-section side>{{ mapPose[item.key]}}</q-item-section>
                  </q-item>
                  <q-item dense clickable v-ripple>
                    <q-item-section>连接点数</q-item-section>
                    <q-item-section side>{{ mapPose.connectedPose.length }}</q-item-section>
                  </q-item>
                </q-list>
              </q-card>
            </q-card-section>
          </div>
        </q-slide-transition>
      </q-card>
    </q-dialog>
  </q-input>
</template>

<script>
import { onMounted, ref, watch, computed } from 'vue'
import { api } from 'boot/axios'
import { useAPIStore } from 'stores/api'

const mapPoseItems = [
  { title: '点位类型', key: 'type' },
  { title: '是否可转向', key: 'turnable' },
  { title: '优先度', key: 'priority' }
]

export default {
  name: 'MapPoseSelector',
  props: {
    modelValue: String,
    label: { type: String, default: '选择导航点' },
    filter: String,
    enableDialog: { type: Boolean, default: true }
  },
  setup (props, context) {
    const visible = ref(false)

    const currentMapPose = ref({})
    const map = ref()
    const mapList = ref([])
    const groups = ref([]) // 地图分组的选项
    const group = ref(null) // 地图分组
    const mapOptions = computed(() => (group.value === null ? mapList.value : mapList.value.filter(item => item.group === group.value)))
    const options = ref([])

    const mapPoses = ref([])
    function getMapPoseByID () {
      if (props.modelValue !== '') {
        api.get(useAPIStore().mapUrl + 'mapPose/id/' + props.modelValue).then(rs => {
          currentMapPose.value = rs.data
          api.get(useAPIStore().mapUrl + 'map/id/' + currentMapPose.value.mapID).then(rs => {
            map.value = rs.data
          })
        })
      }
    }
    watch(map, value => {
      if (value) {
        api.get(useAPIStore().mapUrl + 'mapPose/mapID/' + value.id).then(rs => {
          mapPoses.value = rs.data
        })
      } else {
        mapPoses.value = []
      }
    })
    function getMaps () {
      api.get(useAPIStore().mapUrl + 'map/all/simple').then(rs => {
        mapList.value = rs.data
      })
      api.get(useAPIStore().mapUrl + 'map/groups').then(rs => {
        groups.value = rs.data
      })
    }
    onMounted(() => {
      getMapPoseByID()
      getMaps()
    })

    return {
      map,
      options,
      group,
      groups,
      mapPoses: computed(() => props.filter === undefined ? mapPoses.value : mapPoses.value.filter(item => item.type && item.type.includes(props.filter))),
      mapPoseItems,
      currentMapPose,
      visible,
      show () {
        if (props.enableDialog) {
          getMapPoseByID()
          visible.value = true
        }
      },
      select (mapPose) {
        currentMapPose.value = mapPose
        context.emit('update:modelValue', currentMapPose.value.id)
        visible.value = false
      },
      filterFn (val, update) {
        if (val === '') {
          update(() => {
            options.value = mapOptions.value
          })
          return
        }

        update(() => {
          const needle = val.toLowerCase()
          options.value = mapOptions.value.filter(v => v.name.toLowerCase().indexOf(needle) > -1)
        })
      }
    }
  }
}
</script>
